<template>
  <div class="contain">
    <div class="one" id="top">
      <!-- 头部导航栏 -->
      <div class="header">
        <span class="left">智聘招聘管理系统</span>
        <ul class="right">
          <li><a href="http://localhost:8080/#/">后台系统</a></li>
          <!-- <li><a href="#classify">分类</a></li> -->
          <li><a href="#Message">招聘信息</a></li>
          <!-- <li><a href="#about">关于我们</a></li> -->
          <li><a href="http://localhost:8080/#/Like">收藏列表</a></li>
          <li><a href="http://localhost:8080/#/apply">申请列表</a></li>
          <li><a href="http://localhost:8080/#/person">个人中心</a></li>
          <li>
            <el-tooltip class="item" effect="dark" content=" 点击注销登录 " placement="bottom">
              <el-button id="spe" round @click="close()">{{ this.selfInfo.name }}</el-button>
            </el-tooltip>
          </li>
        </ul>
      </div>
      <!-- 主体搜索框 -->
      <div class="main">
        <h1>How Can We Help You?</h1>
        <h2>Search here to get the position you need</h2>
        <div class="search" id="classify">
          <el-input placeholder="请输入内容" v-model="input"> </el-input>
          <el-button type="primary" round @click="search()">Search</el-button>
        </div>
        <!-- 搜索结果显示dialog -->
        <el-dialog :title="input+' 搜索结果'" :visible.sync="searchDialogVisible" width="70%" :before-close="handleClose">
          <el-card class="box-card" style="margin-top: 5px;padding-top: 5px;border: 1px solid sandybrown;" v-for="item in searchData" :key="item.id">
            <div slot="header" class="clearfix">
              <span>{{item.title+' || '+item.grade+' || '+item.company}}</span>
              <el-button style="float: right; padding: 3px 0;font-size: 10px;margin-top: -20px;color: white;" type="text">操作按钮</el-button>
            </div>
            <div>
              <el-descriptions :column="1" size="large" :labelStyle="labelStyle">
                <el-descriptions-item label="职位名称">{{
                    item.title
                  }}</el-descriptions-item>
                <el-descriptions-item label="职位薪资">{{
                    item.salary
                  }}</el-descriptions-item>
                <el-descriptions-item label="工作地点">{{
                    item.address
                  }}</el-descriptions-item>
                <el-descriptions-item label="经验要求">{{
                    item.experience
                  }}</el-descriptions-item>
                <el-descriptions-item label="职位描述"><div v-html="item.content"></div></el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </el-dialog>
      </div>
    </div>
    <!-- 主体2分类框 -->
    <div class="two">
      <div class="classify">
        <ul>
          <li class="left">
            <img src="./images/开发.png" />
            <div>
              <el-button type="text" @click="seeMore($event)">互联网IT</el-button>
              <span>200条相关信息</span>
            </div>
          </li>
          <li>
            <img src="./images/lanling-ershoujiaoyi.png" />
            <div>
              <el-button type="text" @click="seeMore($event)">金融</el-button>
              <span>200条相关信息</span>
            </div>
          </li>
          <li>
            <img src="./images/lanling-jixie.png" />
            <div>
              <el-button type="text" @click="seeMore($event)">房地产</el-button>
              <span>200条相关信息</span>
            </div>
          </li>
          <li class="left">
            <img src="./images/lanling-wuliu.png" />
            <div>
              <el-button type="text" @click="seeMore($event)">贸易零售</el-button>
              <span>200条相关信息</span>
            </div>
          </li>
          <li>
            <img src="./images/教学.png" />
            <div>
              <el-button type="text" @click="seeMore($event)">教育传媒</el-button>
              <span>200条相关信息</span>
            </div>
          </li>
          <li>
            <img src="./images/服务.png" />
            <div>
              <el-button type="text" @click="seeMore($event)">服务业</el-button>
              <span>200条相关信息</span>
            </div>
          </li>
          <li class="left bottom">
            <img src="https://html.spiderthemes-demos.com/docy/img/new/icon7.png" />
            <div>
              <el-button type="text" @click="seeMore($event)">市场销售</el-button>
              <span>200条相关信息</span>
            </div>
          </li>
          <li class="bottom">
            <img src="https://html.spiderthemes-demos.com/docy/img/new/icon8.png" />
            <div>
              <el-button type="text" @click="seeMore($event)">人事行政</el-button>
              <span>200条相关信息</span>
            </div>
          </li>
          <li class="bottom">
            <img src="https://html.spiderthemes-demos.com/docy/img/new/icon9.png" />
            <div>
              <el-button type="text" @click="seeMore($event)">其他</el-button>
              <span>200条相关信息</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 主页3招聘信息框 -->
    <div class="three" id="Message">
      <h1>Recruitment Information Details</h1>
      <div class="message" v-for="item in info1" :key="item.id">
        <div class="msgLeft">ID - {{ item.cate_id }}</div>
        <div class="msgRight">
          <el-button id="special" type="text" @click="show1(item)">
            <h2>
              {{ item.title }} | {{ item.grade }} | {{ item.company }}
            </h2>
          </el-button>
          <!-- <div>工作内容：{{ item.presponsibility }}</div> -->
          <div>工作内容：{{item.content}}</div>
          <div>工作经验：{{ item.experience }}</div>
          <div>工作地点：{{ item.address }}</div>
          <el-button type="warning" icon="el-icon-star-off" size="small " id="like" @click="likeIt(item)">收藏</el-button>
          <el-button type="primary" size="small" id="submit" @click="apply(item.id)">立即投递</el-button>
        </div>

      </div>
      <el-dialog title="招聘详情信息" :visible.sync="dialogVisible" width="40%">
        <el-descriptions :column="1" size="large" :labelStyle="labelStyle">
          <el-descriptions-item label="职位名称">{{
              info1.title
            }}</el-descriptions-item>
          <el-descriptions-item label="职位分类">{{
              info1.pclassify
            }}</el-descriptions-item>
          <el-descriptions-item label="工作地点">{{
              info1.pworkSite
            }}</el-descriptions-item>
          <el-descriptions-item label="工作要求">{{
              info1.prequest
            }}</el-descriptions-item>
          <el-descriptions-item label="工作部门">{{
              info1.pdepartment
            }}</el-descriptions-item>
          <el-descriptions-item label="工作描述">{{
              info1.pdescribe
            }}</el-descriptions-item>
          <el-descriptions-item label="工作职责">{{
              info1.presponsibility
            }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
      <el-dialog title="提交工作申请" :visible.sync="infoDialogVisible" width="40%">
        <el-form :model="ruleForm1" ref="ruleForm1" label-width="80px" class="demo-ruleForm" hide-required-asterisk>
          <el-form-item label="用户名" prop="username" :rules="{
                required: true,
                message: '用户名不能为空',
                trigger: 'blur',
              }">
            <el-input v-model="ruleForm1.username"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email" :rules="[
                {
                  required: true,
                  message: '请输入邮箱地址',
                  trigger: 'blur',
                },
                {
                  type: 'email',
                  message: '请输入正确的邮箱地址',
                  trigger: ['blur', 'change'],
                },
              ]">
            <el-input v-model="ruleForm1.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone" :rules="{
                required: true,
                message: '手机号码不能为空',
                trigger: 'blur',
              }">
            <el-input v-model="ruleForm1.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm1')">提交申请</el-button>
            <el-button @click="resetForm('ruleForm1')">重置</el-button>
            <el-button @click="infoDialogVisible = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-button type="text" id="msgBtn" @click="showMore()">点击查看更多 ></el-button>
    </div>
    <!-- 底部信息栏 -->
    <div class="four" id="about">
      <div class="footerLeft">
        <h2>智聘招聘管理系统</h2>
        <span>好工作，上智聘招聘</span>
      </div>
      <div class="footerRight">
        <ul>
          <li class="title">Solution</li>
          <li>
            <img src="https://html.spiderthemes-demos.com/docy/img/new/smile2.png" alt="" />
            <span>Help Docs</span>
          </li>
          <li>
            <img src="https://html.spiderthemes-demos.com/docy/img/new/doc2.png" alt="" />
            <span>Docbuzz</span>
          </li>
          <li>
            <img src="https://html.spiderthemes-demos.com/docy/img/new/house2.png" alt="" />
            <span>User Frontend</span>
          </li>
          <li>
            <img src="https://html.spiderthemes-demos.com/docy/img/new/bag2.png" alt="" />
            <span>Lightbox</span>
          </li>
        </ul>
        <ul>
          <li class="title">Support</li>
          <li>Help Desk</li>
          <li>Knowledge Base</li>
          <li>Live Chat</li>
          <li>Reports</li>
        </ul>
        <ul>
          <li class="title">About Us</li>
          <li>Testimonials</li>
          <li>Affiliates</li>
          <li>Partners</li>
          <li>Careers</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    searchArtCateAPI,
    idSearchArtCateAPI
  } from '@/api'
  export default {
    name: 'wel-come',
    data() {
      return {
        searchDialogVisible: false,
        input: '',
        searchData: '',
        info: [{
          id: '1',
          pworkSite: '',
          flag: '',
          pdescribe: '',
          pdepartment: '',
          presponsibility: '',
          pclassify: '',
          prequest: '',
          pname: ''
        }],
        // info1: {
        //   id: '',
        //   pworkSite: '',
        //   flag: '',
        //   pdescribe: '',
        //   pdepartment: '',
        //   presponsibility: '',
        //   pclassify: '',
        //   prequest: '',
        //   pname: ''
        // },
        info1: [{
            title: '前端实习',
            cate_id: '1',
            content: `岗位职责：
1.负责前端界面的前端构建，各类交互设计与实现；
2.前端样式和脚本的模块设计及优化；
3.配合后台开发人员完成项目；
任职要求：
1.统招全日制一本及以上学历，计算机科学与技术、软件工程或相关专业；
2.熟悉vue框架，了解react等主流框架
3.了解JavaScript、Ajax、DOM等前端技术；
4.对css/JavaScript性能优化、解决多浏览器兼容性问题有一定的了解；
5.有强烈的上进心和求知欲，善于学习和运用新知识，善于沟通和逻辑表达，有强烈的团队意识和执行力。`,
            cover_img: null, // 封面图片，保存的是一个文件
            state: '', // 以下为新增
            salary: '3-6k',
            address: '北京朝阳区',
            experience: '在校/应届',
            grade: '本科',
            company: '北京滴答科技'
          },
          {
            title: '高级前端开发工程师',
            cate_id: '2',
            content: `岗位职责：
１.完成产品网站和管理平台的前端开发，编写可复用的用户界面组件；
２.持续优化前端体验和页面响应速度，并保证兼容性和执行效率；
３.和后台工程师紧密配合，保证产品的用户体验及稳定性；`,
            cover_img: null, // 封面图片，保存的是一个文件
            state: '', // 以下为新增
            salary: '15-30k',
            address: '厦门',
            experience: '3-5年',
            grade: '大专',
            company: '海岸融信'
          },
          {
            title: '美团正编销售',
            cate_id: '3',
            content: `岗位职责：
            1. 面向本地餐饮商家，拓展及维护新老客户去使用美团旗下的快驴平台进行食材采购，独立完成相应绩效目标；
            2. 负责区域内客户的回访和维护，建立稳定的合作关系，使其长期保持复购；
            3. 结合公司的营销活动和销售策略，完成公司下达的工作指标；`,
            cover_img: null, // 封面图片，保存的是一个文件
            state: '', // 以下为新增
            salary: '8-13k',
            address: '河南省郑州市',
            experience: '经验不限',
            grade: '大专',
            company: '美团'
          }
        ],
        ruleForm1: {
          email: '',
          phone: '',
          pid: '',
          username: ''
        },
        cur: '',
        labelStyle: {
          width: '60px'
        },
        dialogVisible: false,
        infoDialogVisible: false,
        workId: '',
        selfInfo: {
          name: '洋少'
        }
      }
    },
    mounted() {

    },
    methods: {
      getSelfInfo() {},
      async search() {
        const {
          data: res
        } = await searchArtCateAPI(this.input)
        if (res.status !== 0) {
          return this.$message.error(res.message)
        }
        // console.log('搜索返回的数据：', res.data.id)
        const data = await idSearchArtCateAPI(res.data.id)
        this.searchData = data.data.data
        // 打开搜索结果展示的dialog
        this.searchDialogVisible = true
        console.log('搜索返回的数据：', this.searchData)
        // 搜索完成后，搜索框置空
        // this.input = ''
      },
      showAllPosition() {

      },
      seeMore(event) {

      },
      showMore() {

      },
      show1(item) {
        this.dialogVisible = true
      },
      close1() {

      },
      apply(workId) {

      },
      resetForm(formName) {

      },
      submitForm(formName) {

      },
      likeIt(item) {

      },
      close() {

      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.input = ''
            done()
          })
          .catch(_ => {})
      }
    },
    computed: {}
  }
</script>

<style scoped>
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  * {
    margin: 0 auto;
    padding: 0;
  }

  ul {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  .contain {
    width: 100%;
  }

  .one {
    width: 100%;
    height: 113vh;
    /* background: url("./images/背景图5.png"); */
    background: url("./images/background02.png");
    background-size: 100% 113vh;
    /* position: fixed; */
    /* min-width: 100%;
  min-height: 100%; */
    /* background-attachment: fixed; */
  }

  /* 头部 */
  .one .header ul {
    display: inline-flex;
  }

  .one .header li {
    color: white;
    font-size: 1.1rem;
    margin-left: 2rem;
  }

  .header {
    display: flex;
  }

  .header .left {
    justify-content: left;
    font-size: 21px;
    font-weight: 600;
    color: white;
    margin-left: 4rem;
    margin-top: 2.5rem;
  }

  .header .right {
    justify-content: right;
    margin-right: 0;
  }

  .header .right a {
    display: block;
    height: 3.8rem;
    line-height: 6rem;
    color: white;
  }

  .header .right a:hover {
    border-bottom: 2px solid white;
    transition: all 0.2s ease-out 0s;
  }

  .header .right #spe {
    color: #4c4cf1;
    font-size: 14px;
    font-weight: 550;
    letter-spacing: 0.5px;
    margin-top: 25px;
    margin-right: 35px;
  }

  /* 主体搜索框 */
  .one .main h1 {
    color: white;
    margin-top: 10.5rem;
    /* margin-top: 200px;
  margin-left: 600px; */
    text-align: center;
    font-weight: 700;
    font-size: 37px;
  }

  .one .main h2 {
    color: white;
    text-align: center;
    font-weight: 100;
    margin-top: 1rem;
  }

  .main .search {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin: 0;
  }

  .main>>>.el-input {
    width: 46%;
    margin: 0 0 0 21rem;
  }

  .main>>>.el-input__inner {
    width: 100%;
    height: 3.5rem;
    border-radius: 3.5rem;
    border: 0px;
    margin-top: 2rem;
    font-size: 16px;
    padding-left: 35px;
  }

  .main>>>.el-button {
    height: 3.5rem;
    border-radius: 3.5rem;
    width: 9.5%;
    font-size: 16px;
    font-weight: 700;
    background-color: #0d0d75;
    border: 0;
    margin-top: 2rem;
    margin-left: 10px;
  }

  /* 主体分类框 */
  .two {
    width: 100%;
    height: 70vh;
    background: url("./images/主页2背景.png");
    background-size: 100vw 70vh;
    position: relative;
  }

  .two .classify {
    width: 88%;
    border-radius: 20px;
    background-color: #fff;
    position: absolute;
    top: -20%;
    left: 6%;
    box-shadow: 0 30px 60px 0 rgb(2 2 48 / 8%);
  }

  .two ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: left; */
  }

  .two li {
    flex-shrink: 0;
    width: 33%;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    display: flex;
    height: 135px;
  }

  .two .left {
    border-left: 0px;
  }

  .two .bottom {
    border-bottom: 0px;
  }

  .two img {
    width: 50px;
    height: 45px;
    margin: auto 40px;
    margin-right: 20px;
  }

  .two li div {
    margin-left: 0px;
  }

  .two li .el-button {
    display: block;
    font-weight: 600;
    margin-top: 43px;
    text-align: left;
    font-size: 18px;
    letter-spacing: 1px;
    /* margin-bottom: 10px; */
    color: black;
  }

  .two li a:hover {
    color: #4c4cf1;
  }

  .two span {
    color: #5f6368;
    font-size: 14px;
    letter-spacing: 1px;
  }

  /* 主页招聘信息框 */
  .three {
    width: 100%;
    height: 161vh;
    background: url("./images/主页3背景5.png");
    background-size: 100vw 161vh;
    margin-top: 30px;
  }

  .three h1 {
    color: #0d0d75;
    text-align: center;
    margin-bottom: 50px;
  }

  .three .message {
    width: 70%;
    /* height: 190px; */
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 30px 0 rgb(2 2 48 / 6%);
    display: flex;
    margin-top: 30px;
    border: 1px solid #e0e0e0;
  }

  .three .msgLeft {
    width: 120px;
    height: 65%;
    border-radius: 67%;
    background-color: #f4f4fe;
    margin: 3% 35px 0 50px;
    font-size: 30px;
    line-height: 100px;
    text-align: center;
    color: #0d0d75;
  }

  .three .msgRight {
    font-size: 20px;
    margin-left: 20px;
    letter-spacing: 1px;
    /* width: 640px; */
    width: 80%;
  }

  .three .message #special {
    color: #232361;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .three .message #special:hover {
    color: #4c4cf1;
  }

  .three .msgRight h2 {
    margin-top: 25px;
    text-align: left;
    font-size: 24px;
    margin-bottom: 10px;
  }

  .three .msgRight div {
    /* font-size: 16px; */
    float: left;
    /* width: 610px; */
    width: 100%;
    margin-top: 6px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .three .msgRight>>>#submit {
    float: right;
    font-size: 18px;
    margin-right: 20px;
    padding: 10px;
    margin-bottom: 20px;
  }

  .three .msgRight>>>#star {
    margin-right: 80px;
    float: right;
    /* background-color: red; */
  }

  .three #like {
    float: right;
    margin-right: 15px;
    margin-bottom: 20px;
    font-size: 18px;
    padding: 10px;
  }

  .three #msgBtn {
    width: 100%;
    color: #4c4cf1;
    font-weight: 550;
    font-size: 16px;
    /* margin-right: -720px; */
    margin-top: 10px;
  }

  .three .message>>>.el-dialog__wrapper {
    transition-duration: 0.3s;
  }

  /* 底部栏目 */
  .four {
    width: 100%;
    height: 60vh;
    background: url("./images/主页4背景1.png");
    background-size: 100% 60vh;
    display: flex;
  }

  .footerLeft {
    width: 20%;
    margin: 0 70px;
    margin-top: 130px;
  }

  .footerLeft h2 {
    color: #232361;
  }

  .footerLeft span {
    display: block;
    margin-top: 30px;
    font-size: 16px;
    color: #6b7082;
    font-weight: 600;
  }

  .footerRight {
    display: flex;
    margin-top: 110px;
  }

  .footerRight ul {
    margin-left: 50px;
  }

  .footerRight li {
    margin-top: 20px;
    width: 200px;
    text-align: left;
    display: flex;
    color: #6c7688;
  }

  .footerRight img {
    /* display: block; */
    margin: 0px;
    margin-right: 18px;
    width: 20px;
    height: 20px;
    /* margin-top: 15px; */
  }

  .footerRight ul span {
    margin: 0;
    color: #6c7688;
  }

  .footerRight ul .title {
    font-size: 18px;
    color: #232361;
    font-weight: 600;
    text-align: center;
  }
  /* elcard的样式 */
</style>
